<!--
 * @Author: your name
 * @Date: 2021-05-17 08:47:11
 * @LastEditTime: 2021-05-20 14:15:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \english\src\components\Head.vue
-->
<template>
  <div class="head">
    <div class="top">
      <p class="tit">在线英语学习系统</p>
      <p>{{ nowDate + " " + nowTime + " " + nowWeek }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowDate: "", // 当前日期
      nowTime: "", // 当前时间
      nowWeek: "", // 当前星期
    };
  },
  methods: {
    currentTime() {
      setInterval(this.getDate, 500);
    },
    getDate: function () {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let week = new Date().getDay();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      if (week == 1) {
        this.nowWeek = "星期一";
      } else if (week == 2) {
        this.nowWeek = "星期二";
      } else if (week == 3) {
        this.nowWeek = "星期三";
      } else if (week == 4) {
        this.nowWeek = "星期四";
      } else if (week == 5) {
        this.nowWeek = "星期五";
      } else if (week == 6) {
        this.nowWeek = "星期六";
      } else {
        this.nowWeek = "星期日";
      }
      _this.nowTime = hh + ":" + mf;
      _this.nowDate = yy + "/" + mm + "/" + dd;
    },
  },
  mounted() {
    this.currentTime();
  },
  beforeDestroy: function () {
    if (this.getDate) {
      // console.log("销毁定时器");
      clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
  created() {},
};
</script>

<style lang="scss">
.head {
  width: 100%;

  .top {
    width: 98%;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;

    p {
      color: #333333;
    }

    .tit {
      font-weight: bold;
      font-size: 20px;
      color: #000;
    }
  }
}
</style>